<template lang="pug">
.form
  .form-title {{title}}
  .form-body
    .form-body-container
      el-form(:model="form" ref="ruleForm" :rules="rules" label-width="120px" size="small")
        el-form-item(label="图片册名称：" prop="albumName")
          el-input(placeholder="请输入材料册名称" v-model="form.albumName" maxlength="20" show-word-limit)
        el-form-item(label="图片册封面：")
          .el-form-item-bd
            .el-form-item-cover(v-if="form.fileUrl")
              img(:src="form.fileUrl")
          .el-form-item-upload
            ali-upload(@getFileInfo="getFileInfo($event)" accept=".png,.jpg")
              el-button(icon="el-icon-upload" name="pink") 选择上传文件
          .el-form-item-info 只能上传jpg/png格式文件，文件不能超过5MB
        el-form-item(label="图片册描述：")
          el-input(type="textarea" v-model="form.albumDesc" placeholder="请输入内容" maxlength="100" resize="none" rows="5" show-word-limit)
        el-form-item(
          label="排序："
          prop="albumSort"
        )
          el-input(placeholder="请输入内容" v-model.number="form.albumSort")
      .form-submit
        el-button(name="pink" size="small" @click="submit") 提交
</template>

<script>
import aliUpload from "@/components/customUpload"
import { saveOrUpdatePhoto, getImageList } from 'api'
export default {
  name: 'imageEdit',
  components: {
    aliUpload,
  },
  data () {
    var checkSort = (rule, value, callback) => {
      if (!value) {
        callback()
      } else {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          if (value < 0 || value > 9999) {
            callback(new Error('输入正整数，最大值不能超过9999'))
          } else {
            callback();
          }
        }
      }
    }
    return {
      title: '添加材料册',
      form: {
        albumId: '',
        albumName: '',
        fileUrl: '',
        albumDesc: '',
        albumSort: ''
      },
      rules: {
        albumName: [
          { required: true, message: '请输入图片册名称', trigger: 'blur' }
        ],
        albumSort: [
        { validator: checkSort, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    getFileInfo (file) {
      this.form.fileUrl = file[0].fileUrl
      this.form.albumCover = file[0].fileId
    },
    submit () {
      this.$refs.ruleForm.validate(async validate => {
        if (validate) {
          try {
            await this.$axios.post(saveOrUpdatePhoto, { content: { ...this.form } })
            this.$message.success('提交成功！')
            this.$router.back()
          } catch (err) {
            this.$message.error(err.message || err.ResultSet.errors)
          }
        }
      })
    },
    async getDetail () {
      try {
        const { ResultSet } = await this.$axios.post(getImageList, { content: { albumId: this.form.albumId } })
        this.form = { ...this.form, ...ResultSet.userData.PhotoAlbumList[0] }
      } catch (err) {
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.params.id) {
        vm.form.albumId = parseInt(to.params.id)
        vm.title = '编辑图片册'
        vm.getDetail()
      } else {
        vm.title = '添加图片册'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.form {
  padding: 0 32px 16px;
  height: 100%;
}
.form-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  line-height: 22px;
}
.form-body {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
}
.form-body-container {
  width: 600px;
  margin: 0 auto;
}
.el-form-item-cover {
  width: 200px;
  margin-bottom: 10px;
  img {
    max-width: 100%;
  }
}
.el-form-item-info {
  font-size: 12px;
  color: #999;
  margin-top:5px;
}
.form-submit {
  padding-left: 120px;
}
.el-form-item-upload {
  display: inline-block;
}
</style>